<div id="shape-dragable-menu">
	<table class="table table-center bg-white table-border-black">
		<tr class="success">
			<td class="title bg-draw-blue color-white" colspan=2>Editing Tools</td>
		</tr>
		<tr class="error">
			<td>
				<div class="btn-toolbar toolbox-btn-bar colorbox">
					<span><a id="creation-pencil">P</a></span>
					<span><a id="creation-line">L</a></span>
					<span><a id="creation-arrow">LA</a></span>
					<span><a id="creation-circle">C</a></span>
					<span><a id="creation-rect">R</a></span>
					<span><a id="creation-rect-round">RR</a></span>
					<span><a id="creation-circle-fill">CF</a></span>
					<span><a id="creation-rect-fill">RF</a></span>
					<span><a id="creation-rect-round-fill">RRF</a></span>
				</div>
				<div class="btn-toolbar">
					<div class="btn-group">
						<select class="stroke-size full-width" style="margin-bottom:5px;">
							<option value=1>1px</option>
							<option value=3>3px</option>
							<option value=5>5px</option>
							<option value=7>7px</option>
						</select>
					</div>
				</div>
				<!--
				<div class="btn-toolbar">
					<div class="btn-group">
						<select class="stroke-style full-width">
							<option value='normal'>Normal</option>
							<option value='dotted'>Dotted</option>
							<option value='dashed'>Dashed</option>
						</select>
					</div>
				</div>
				-->
			</td>
			<td>
				<div class="tagline">Color Selected</div>
				<div class="toolbox-color-container colorbox">
					<span class="black" id="stroke-color"></span>
					<span class="black" id="fill-color"></span>
				</div>
				<div class="tagline">Pick Color</div>
				<div class="toolbox-color-container colorbox">
					<span class="black btn-color" onclick="App.kinetic.shape.config.setEditColor('#000000')"></span>
					<span class="gray btn-color" onclick="App.kinetic.shape.config.setEditColor('#808080')"></span>
					<span class="lightgray btn-color" onclick="App.kinetic.shape.config.setEditColor('#C0C0C0')"></span>
					<span class="white btn-color" onclick="App.kinetic.shape.config.setEditColor('#FFFFFF')"></span>
					<span class="magenta btn-color" onclick="App.kinetic.shape.config.setEditColor('#830006')"></span>
					<span class="red btn-color" onclick="App.kinetic.shape.config.setEditColor('#FF0017')"></span>
					<span class="purple btn-color" onclick="App.kinetic.shape.config.setEditColor('#83067B')"></span>
					<span class="green btn-color" onclick="App.kinetic.shape.config.setEditColor('#FF17F5')"></span>
					<span class="lightgreen btn-color" onclick="App.kinetic.shape.config.setEditColor('#007F25')"></span>
					<span class="darkkhaki btn-color" onclick="App.kinetic.shape.config.setEditColor('#00FE25')"></span>
					<span class="yellow btn-color" onclick="App.kinetic.shape.config.setEditColor('#807F27')"></span>
					<span class="darkblue btn-color" onclick="App.kinetic.shape.config.setEditColor('#FFFD56')"></span>
				 	<span class="blue btn-color" onclick="App.kinetic.shape.config.setEditColor('#020A7A')"></span>
					<span class="mossgreen btn-color" onclick="App.kinetic.shape.config.setEditColor('#0620F4')"></span>
					<span class="lightblue btn-color" onclick="App.kinetic.shape.config.setEditColor('#00807F')"></span>
				</div>
			</td>
		</tr>
		<tr class="warning">
			<td colspan=2>
				<input type="button" class="save-button" value="<?=$this->lang->line('value_save');?>" />
				<input type="button" class="cancel-button remove-pop" value="<?=$this->lang->line('value_cancel');?>" />
			</td>
		</tr>
	</table>
</div>